<div id="groupsonlinedaily">
    <div class="demo-spin-container" v-if="isSpin">
        <Spin size="large" fix></Spin>
    </div>
    <Row style="margin:10px;height: 32px;">
        <div style="float: left;">
            <div style="height: 32px; line-height: 32px;">{{$t("reportForm.selectDev")}}:&nbsp;</div>
        </div>
        <div style="float: left;position: relative;width: 300px;">
            <div class="search-wrapper" v-click-outside.capture="onClickOutside">
                <i-input v-model.trim="sosoValue" icon="ios-search-outline" @on-change="sosoValueChange" @on-blur="blur" :readonly="readonly" @on-focus="focus" @on-click="focus" :placeholder="placeholder"></i-input>
                <transition name="fade">
                    <div class="search-item-wrapper" v-show="isShowMatchDev">
                        <Tree :data="treeData" show-checkbox @on-check-change="onCheckedDevice" check-strictly></Tree>
                    </div>
                </transition>
            </div>
        </div>
        <div style="float: left;">
            <div style="height: 32px; line-height: 32px;padding: 0 10px;">{{$t("reportForm.selectDate")}}:&nbsp;</div>
        </div>
        <div style="float: left;position: relative;">
            <Date-Picker v-model="yearMonth" style="width: 150px"></Date-Picker>
        </div>
        <div style="margin-left:20px;float: left;">
            <i-button @click="clean" icon="ios-nuclear-outline">{{$t("reportForm.clean")}}</i-button>
        </div>
        <div style="margin-left:20px;float: left;">
            <i-button @click="onClickQuery" icon="ios-search">{{$t("reportForm.query")}}</i-button>
        </div>
    </Row>
    <div style="margin:10px;">
        <i-table ref="totalTable" :columns="columns" :data="tableData" border :height="tableHeight" :loading="loading"></i-table>
    </div>
</div>